<!DOCTYPE html>
<html>
<head>
	<title>Disaster Prevention - Natural Disaster Avoidance Application</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
			margin: 0;
			padding: 0;
		}
		header {
			background-color: #264653;
			color: #fff;
			text-align: center;
			padding: 10px;
		}
		h1 {
			margin: 0;
			font-size: 1.8em;
			font-weight: bold;
		}
		main {
			padding: 20px;
			line-height: 1.5;
		}
		h2 {
			margin-top: 20px;
			margin-bottom: 10px;
			font-size: 1.4em;
			font-weight: bold;
		}
		section {
			background-color: #fff;
			border: 1px solid #ddd;
			padding: 10px;
			margin-bottom: 20px;
		}
		button {
			background-color: #264653;
			color: #fff;
			border: none;
			padding: 10px 20px;
			border-radius: 5px;
			cursor: pointer;
			font-weight: bold;
			transition: background-color 0.3s ease;
		}
		button:hover {
			background-color: #2a9d8f;
		}
		img {
			max-width: 100%;
			height: auto;
		}
    body {
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
			margin: 0;
			padding: 0;
		}
		header {
			background-color: #264653;
			color: #fff;
			text-align: center;
			padding: 10px;
		}
		h1 {
			margin: 0;
			font-size: 1.8em;
			font-weight: bold;
		}
		main {
			padding: 20px;
			line-height: 1.5;
		}
		h2 {
			margin-top: 20px;
			margin-bottom: 10px;
			font-size: 1.4em;
			font-weight: bold;
		}
		section {
			background-color: #fff;
			border: 1px solid #ddd;
			padding: 10px;
			margin-bottom: 20px;
		}
		button {
			background-color: #264653;
			color: #fff;
			border: none;
			padding: 10px 20px;
			border-radius: 5px;
			cursor: pointer;
			font-weight: bold;
			transition: background-color 0.3s ease;
		}
		button:hover {
			background-color: #2a9d8f;
		}
		img {
			max-width: 100%;
			height: auto;
		}
		.button-grid {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-column-gap: 20px;
			margin-top: 20px;
		}
		.button-grid button {
			padding: 20px;
		}
		.button-grid img {
			max-width: 100%;
			height: auto;
			border-radius: 50%;
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	
  <header>
		<h1>Disaster Prevention</h1>
	</header>
	<main>
		<section>
			<h2>Select Natural Disaster Type</h2>
			<div>
				<button onclick="showEarthquakeInfo()">Earthquake</button>
				<button onclick="showTyphoonInfo()">Typhoon</button>
				<button onclick="showFloodInfo()">Flood</button>
				<button onclick="showWildfireInfo()">Wildfire</button>
			</div>
		</section>
		<section>
			<h2>Current Location</h2>
			<p>Current Location: <span id="location"></span></p>
			<button onclick="getLocation()">Get Location</button>
			<img src="https://via.placeholder.com/300x200.png?text=Map+Preview" alt="Map Preview">
		</section>
		<section>
			<h2>Prevention Knowledge Base</h2>
			<p>Learn relevant knowledge to reduce the risk of being hit by natural disasters.</p>
			<button onclick="showKnowledgeBase()">View Knowledge Base</button>
		</section>
		<section>
			<h2>Emergency Plan</h2>
			<p>Create your own emergency plan and be prepared in advance.</p>
			<button onclick="createEmergencyPlan()">Create Plan</button>
		</section>
		<section>
			<h2>More Options</h2>
			<div class="button-grid">
				<button>
					<img src="https://via.placeholder.com/100x100.png?text=Button+1" alt="Option 1">
				</button>
				<button>
					<img src="https://via.placeholder.com/100x100.png?text=Button+2" alt="Option 2">
				</button>
				<button>
					<img src="https://via.placeholder.com/100x100.png?text=Button+3" alt="Option 3">
				</button>
				<button>
					<img src="https://via.placeholder.com/100x100.png?text=Button+4" alt="Option 4">
				</button>
				<button>
					<img src="https://via.placeholder.com/100x100.png?text=Button+5" alt="Option 5">
				</button>
			</div>
		</section>
	</main>

	<script>
		function showEarthquakeInfo() {
      alert("Typhoons are severe tropical storms that can cause strong winds, heavy rain, and flooding. It is important to pay attention to storm warnings and take steps to ensure your safety.");
	}

	function showFloodInfo() {
		alert("Floods can occur in a variety of settings and can cause significant damage to buildings and infrastructure. It is important to be aware of flood-prone areas and have a plan in place in case of a flood.");
	}

	function showWildfireInfo() {
		alert("Wildfires can spread quickly, and are often a result of dry and hot weather conditions. It is important to stay informed about wildfire risks in your area and take proactive steps to prevent fires.");
	}

	function getLocation() {
		// use the browser's geolocation API to get the user's current location
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(showPosition);
		} else {
			alert("Geolocation is not supported by this browser.");
		}
	}

	function showPosition(position) {
		// display the user's latitude and longitude on the page
		document.getElementById("location").innerHTML = position.coords.latitude + ", " + position.coords.longitude;
	}

	function showKnowledgeBase() {
		// redirect the user to a page with more information about disaster prevention education
		window.location.href = "https://www.redcross.org/get-help/how-to-prepare-for-emergencies/types-of-emergencies.html";
	}

	function createEmergencyPlan() {
		// redirect the user to a page where they can create their own emergency plan
		window.location.href = "https://www.ready.gov/plan";
	}
</script>


</body>
</html>